<!DOCTYPE html>
<html>  
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Harnessing Web Experiences</title>
<link rel="stylesheet" type="text/css" href="../css/styles.css" />
<!-- jQuery UI is used to render views -->
<link type="text/css" href="../css/flick/jquery-ui-1.8.17.custom.css" rel="Stylesheet" />
<!-- jQuery is used to make Ajax calls -->
<script type="text/javascript" src="../js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
</head>

<body>
<a href="/" id="legend" class="link">Legend</a><a href="/sfe-fyp/search/help" id="help" class="link">Help</a>
<div id="page">

	<h1 id="logo"><spec>Harnessing</spec>WebExperiences</h1>
	
	<form id="searchForm" method="post">

			<div class="ui-widget">
				<input id="s" type="text" />
				<input type="submit" value="Search" id="submitButton" />
			</div>
			
			<div id="radioGroup">
				<input type="radio" name="domain" value="book" id="book" checked />
				<label for="book" >Book</label>
				
				<input type="radio" name="domain" value="movie" id="movie" />
				<label for="movie">Movie</label>
			</div>
						
	</form>
	<div id="resultsDiv"></div>

</div>

<div id="visualization">
<div id="overview">
<p id="title" >Title is long</p><p id="subtitle" >SubTitle is longer</p><p id="rating" ><b>/5</b></p><br/>
<p class="group3" id="po1" >Favourable opinion</p><br/>
<p class="group3" id="po2" >Critical opinion</p><br/>
<p class="group3" id="po3" >Other people opinion 3</p><br/>
<p class="group3" id="po4" >Other people opinion 4</p><br/>
<p class="group3" id="po5" >Other people opinion 5</p><br/>

</div>
<p class="group2" id="gs1" >Sent1</p>
<p class="group2" id="gs2" >Sent2</p><p class="group2" id="gs3" >Sent3</p>
<p class="group2" id="gs4" >Sent4</p><p class="group2" id="gs5" >Sent5</p>
<p class="group2" id="gs6" >Sent6</p><p class="group2" id="gs7" align="right" >Sent7</p>
<p class="group2" id="gs8" >Sent8</p><p class="group2" id="gs9" >Sent9</p>
<p class="group2" id="gs10" >Sent10</p><p class="group2" id="gs11" >Sent11</p>
<p class="group2" id="gs12" >Sent12</p>
<p class="group2" id="gs13" >Sent13</p>
<p class="group2" id="gs14" >Sent14</p><p class="group2" id="gs15" >Sent15</p>
<p class="group2" id="gs16" >Sent16</p><p class="group2" id="gs17" >Sent17</p>
<p class="group2" id="gs18" >Sent18</p><p class="group2" id="gs19" ></p><p class="group2" id="gs20" ></p>
<p class="group2" id="gs21" ></p><p class="group2" id="gs22" ></p><p class="group2" id="gs23" ></p><p class="group2" id="gs24" ></p><p class="group2" id="gs25" ></p><p class="group2" id="gs26" ></p>
<p class="group2" id="gs27" ></p><p class="group2" id="gs28" ></p><p class="group2" id="gs29" ></p>
<p class="group2" id="gs30" ></p><p class="group2" id="gs31" ></p><p class="group2" id="gs32" ></p>
<br/>

<button id="back" type="button">Back</button>
<div class="dialog" id="d1"></div>
<div class="dialog" id="d2"></div>
</div>
<p class="credit">Powered by Xinli Jia</p>

</body>
</html>